.piece {
    /* If I don't set float property and then there would exists a ghostly margin for each piece. */
    float: left; 
    width: 12.5%;
    height: 12.5%;
    padding: 0;
    margin: 0;
    background-size: 100%;
}

.hint {
    width: 36%;
    height: 36%;
    margin-top: 32%;
    margin-left: 32%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
}

.capture-hint {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid rgb(0, 0, 0, 0.1);
}

.board {
   position: relative;
   width: 43%;
   margin-left: 8px;
   margin-top: 8px;
   padding: 0;
}

.board > img {
    width: 100%;
}

.board > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}


.coordinate {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.coordinate-light {
    fill: #3b3b3b;
}

.coordinate-dark {
    fill: #edeed1;
}

.coordinate-dark, .coordinate-light {
    font-size: 0.22vw;
}

.game-tools-manual {
    position: absolute;
    top: 0;
    bottom: 20%;
    left: 30%;
    right: 30%;
    overflow: auto;
}

.game-tools-manual ol {
    padding-left: 2.7vw;
}

.game-tools-manual li {
    margin-top: 10%;
    font-size: 1.4vw;
}

.game-tools-manual li div {
    float: left;
    margin-left: 2.7vw;
    margin-right: 2.7vw;
    cursor: pointer;
}

.game-tools-bar {
    position: absolute;
    top: 85%;
    bottom: 5%;
    left: 25%;
    right: 25%;
}

.game-tools-bar > div{
    float: left;
    width: 25%;
    margin: 0;
    text-align: center;
}

.game-tools-bar > div > i {
    font-size: 2.5vw;
}

.dialog {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
}

.dialog-save {
    position: absolute;
    top: 35%;
    bottom: 35%;
    left: 35%;
    right: 35%;
}

.dialog-load {
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: 35%;
    right: 35%;
    overflow: auto;
}

.dialog-bar {
    margin: auto 0;
}

.dialog-bar > div{
    float: left;
    width: 50%;
    padding: 0 15%;
    font-size: 2.8vw;
    text-align: center;
    cursor: pointer;
}

.game-tools {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 43%;
    right: 0;
    margin-left: 8px;
}

.game {
    position: relative;
}